import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import * as $ from 'jquery';

@Component({
  selector: 'app-outputdesign',
  templateUrl: './outputdesign.component.html',
  styleUrls: ['./outputdesign.component.css']
})
export class OutputdesignComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }

  item1: boolean = true;
  item2: boolean = false;
  item3: boolean = false;
  item4: boolean = false;
  item5: boolean = false;

  ngOnInit(): void {
  
    $('.list-group-item').on('click', function () {
      
      //this.container.clear();
      $('.list-group-item').removeClass('active');
      $(this).addClass('active');

      // this.item1 = $('#item1').hasClass('active');
      // this.item2 = $('#item2').hasClass('active');
      // this.item3 = $('#item3').hasClass('active');
      // this.item4 = $('#item4').hasClass('active');
      // this.item5 = $('#item5').hasClass('active');

      // alert($(this).attr('id'));
      // switch ($(this).attr('id')) {
      //   case "item1":
      //     $('#showId').append("<app-outputdesigndto></app-outputdesigndto>")
      //     break;

      // }
      // alert(this.item1);
    })
  }
}
